<template>
  <dg-topbar>
    <div class="am-cf">
      <!-- 左图片 -->
      <div class="am-fl dg-nav-img-lpos">
        <router-link to="/homeworkslist">
          <img src="/static/logo.png" alt="topstrong">
        </router-link>
      </div>

      <!-- 右图片 -->
      <div class="am-fr dg-nav-img-rpos dg-hide-1180-down">
        <img src="/static/star_logo.png" alt="topstrong">
      </div>

      <!-- 操作按钮 -->
      <dg-slot>
        <dg-slot-icon v-for="(item, index) in btns" :key="index"
        v-if="item.act"
        :type="item.type"
        @click="btnAct(item.act)">
          {{ item.name }}
        </dg-slot-icon>
        <dg-slot-icon v-else-if="item.href" :type="item.type">
          <router-link :to="item.href" tag="span">{{ item.name }}</router-link>
        </dg-slot-icon>
      </dg-slot>


      <dg-toggle></dg-toggle>

      <!-- 响应式-折叠内容 -->
      <dg-collapse>
        <!-- 菜单 -->
        <dg-nav>
          <dg-nav-item v-for="(item, index) in menus" :key="index"
          :to="item.to"
          :active="menusIDX === index">
            {{ item.name }}
          </dg-nav-item>
        </dg-nav>
      </dg-collapse>
    </div>
  </dg-topbar>
</template>

<script>

export default {
  name: 'dg-header',
  data() {
    return {
    }
  },
  props: {
    menus: {// 菜单
      type: Array,
      default() {
        return [{
        to: '/homeworkslist',
        name: '首页'
      }, {
        to: '/game/cur',
        name: '大赛作品'
      }, {
        to: '/designerList',
        name: '大赛设计师'
      }, {
        to: '/prizeList',
        name: '获奖作品'
      }, {
        to: '/excellentcase',
        name: '优秀案例'
      }];
      }
    },

    btns: {// 按钮或链接 act or href
      type: Array,
      default() {
        return [];
      }
    }
  },
  computed: {
    /**
     * @description
     * 以下属性计算自vuex
     */ 
    menusIDX() {// 获取当前菜单索引
      return this.$store.state.curIndex;
    }
  },
  methods: {
    btnAct(act) {
      this.$emit('btnAct', act);
    }
  }
}
</script>

<style>
</style>